<template>
  <div class="reports-detail">
    <div class="title-box">
      <div style="display: flex;justify-content: space-between">
        <span>
        <span class="name">
        {{ reportDetail.name }}
        </span>
          <span class="reslease-time">
            Release time: {{ reportDetail.release_time }}
          </span>
        </span>
        <div class="select-box">
          <span class="select-item-name">Filter by tags</span>
          <a-select allow-clear v-model="selectValue" style="width: 143px;height: 32px;margin-left: 10px" @change="handleChangeTag">
            <a-select-option v-for="item in selectOptions" :key="item">{{ item }}</a-select-option>
          </a-select>
        </div>
      </div>
      <a-button style="margin-left:20px" type="default" @click="visible = true">
        <img style="width: 16px;height: 16px;margin-bottom: 2px;" src="~@/assets/notion_logo.jpg" alt="">
        <span style="line-height: 32px;color: #000">Notion</span>
      </a-button>
    </div>
    <div class="reports-item" v-for="item in showQuestionList" :key="item.id">
      <div class="common-title">
        {{ item.content }}
      </div>
      <div class="reports-detail-card" v-for="answerItem in item.answers" :key="answerItem.id">
        <div class="userinfo">
          <a-avatar
            v-if="answerItem.avatar"
            slot="avatar"
            :src="answerItem.avatar"
          />
          <span class="username">{{ answerItem.username }}</span>
        </div>
        <div class="contents">
          <div class="contents-content">
            <div style="font-family: Roboto-Regular;" v-html="formatAnswer(answerItem.content)">
            </div>
            <div class="add-wrapper" style="font-family: Roboto-Medium;">
              <span @click="answerItem.commentInputShow = true">Comment</span>
            </div>
          </div>
          <a-list
            v-if="answerItem.comments && answerItem.comments.length"
            :data-source="answerItem.comments"
            item-layout="horizontal"
          >
            <a-list-item slot="renderItem" slot-scope="commentItem">
              <a-list-item-meta>
                  <template #description>
                      <span style="font-family: Roboto-Regular;" v-html="formatAnswer(commentItem.content)"></span>
                  </template>
                <span slot="title">{{ commentItem.username }}</span>
                <a-avatar
                  v-if="commentItem.avatar"
                  slot="avatar"
                  :src="commentItem.avatar"
                />
              </a-list-item-meta>
              <div style="padding-right: 20px" v-if="commentItem.user_id === $store.getters.userInfo.id">
                <a-tooltip title="delete">
                  <span key="comment-delete" @click="deleteComment(answerItem,commentItem)">
                    <a-icon style="color:#069697;font-size: 16px;cursor: pointer" type="delete" />
                  </span>
                </a-tooltip>
              </div>
            </a-list-item>
          </a-list>
          <div class="comment-input" v-if="answerItem.commentInputShow">
            <a-textarea :rows="4" v-model="answerItem.commentInput"></a-textarea>
            <div class="comment-btn">
              <a-button type="link" size="small" @click="(answerItem.commentInputShow = false) && (answerItem.commentInput = '')">CANCEL</a-button>
              <a-button type="primary" size="small" style="margin-left: 10px" @click="addComment(item,answerItem)">ADD</a-button>
            </div>
          </div>
        </div>
        <div class="comment-star" @click="addStar(item,answerItem)">
          <a-icon type="like" :style="{ color: '#069697'}" theme="filled"  v-if="answerItem.vote_user_ids && answerItem.vote_user_ids.length && answerItem.vote_user_ids && answerItem.vote_user_ids.indexOf($store.getters.userInfo.id) > -1" />
          <a-icon type="like" :style="{ color: '#069697'}" v-else />
          <!-- <svg
            focusable="false"
            class=""
            data-icon="like"
            width="1em"
            height="1em"
            fill="#069697"
            aria-hidden="true"
            viewBox="64 64 896 896"><path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"></path></svg> -->
          <span class="star-num">{{ answerItem.vote_user_ids && answerItem.vote_user_ids.length }}</span>
        </div>
      </div>
    </div>
    <a-modal
      title="Send to Notion"
      :visible="visible"
      @ok="handleOkDb"
      @cancel="handleCancelDb"
    >
    <template slot="footer">
        <a-button key="back" @click="handleCancelDb">
          Cancel
        </a-button>
        <a-button key="submit" type="primary" @click="handleOkDb">
          Send
        </a-button>
      </template>
    <a-form :layout="{}">
      <a-form-item
      required
        label="Select the database you want to send"
      >
       <a-select v-model="dbId" >
        <a-select-option v-for="item in dbList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      </a-form-item>
    </a-form>
      
    </a-modal>
  </div>
</template>

<script>
import { ideaReports,ideaSetting } from '@/api/api'
import moment from "moment";

export default {
  name: 'Detail',
  data () {
    return {
      selectValue: '',
      selectOptions: [
      ],
      questionList: [
      ],
      showQuestionList: [],
      reportDetail: {},

      visible: false,
      dbList: [],
      dbId: ''
    }
  },
  created () {
    ideaReports.read(this.$route.query.id).then(res => {
      this.reportDetail = {
        id: res.idea_report.id,
        name: res.idea_report.name,
        release_time: moment(res.idea_report.release_time).format('MMM DD, YYYY, hh:mm A')
      }
      let Tags = []
      this.questionList = res.idea_report.questions.map(qitem => {
        return {
          ...qitem,
          answers: qitem.answers.map(aitem => {
            Tags = [...Tags, ...aitem.tags]
            const findUser1 = (res.users || []).find(user => user.id === aitem.user_id)
            return {
              ...aitem,
              avatar: findUser1?.slack_user?.profile?.image_32,
              username: findUser1?.slack_user?.profile?.real_name,
              commentInputShow: false,
              commentInput: '',
              comments: aitem.comments.map(citem => {
                const findUser2 = (res.users || []).find(user => user.id === citem.user_id)
                return {
                  ...citem,
                  avatar: findUser2?.slack_user?.profile?.image_32,
                  username: findUser2?.slack_user?.profile?.real_name
                }
              })
            }
          })
        }
      })
      this.selectOptions = Tags
      this.handleChangeTag()
    })

    ideaSetting.dbList().then(res => {
      this.dbList = res.db_list
    })
  },
  methods: {
      formatAnswer(value) {
          if(!value) return
          return value.replaceAll('\n', '</br>')
      },
    addComment (questionItem, answerItem) {
      // TODO返回评论ID
      ideaReports.answerComment(answerItem.id, answerItem.commentInput).then(res => {
        console.log('this.$store.getters',this.$store.getters);
        answerItem.comments.push({
          content: answerItem.commentInput,
          id: res.id,
          avatar: this.$store.getters.avatar,
          username: this.$store.getters.userInfo.real_name,
          user_id: this.$store.getters.userInfo.id
        })
        answerItem.commentInput = ''
      })
    },
    deleteComment (answerItem, commentItem) {
      console.log(answerItem, commentItem)
      ideaReports.deleteComment(answerItem.id, commentItem.id).then(res => {
        const index = answerItem.comments.findIndex(el => el.id === commentItem.id)
        if (index === -1) return
        answerItem.comments.splice(index, 1)
      })
    },
    addStar (questionItem, answerItem) {
      ideaReports.vote(answerItem.id).then(res => {
        answerItem.vote_user_ids = res.question_answer.vote_user_ids
      })
    },
    handleChangeTag (value) {
        console.log('this.questionList',this.questionList);
      if (!value) {
        this.showQuestionList = JSON.parse(JSON.stringify(this.questionList))
      } else {
        const showQuestionList = JSON.parse(JSON.stringify(this.questionList))
        console.log('showQuestionList',showQuestionList);
        this.showQuestionList = showQuestionList.map(questionItem => {
          return {
            ...questionItem,
            answers: questionItem.answers.filter(answerItem => {
              return answerItem.tags.find(tagItem => tagItem === value)
            })
          }
        })
      }
    },
    handleOkDb() {
      console.log(this.reportDetail);
      if (!this.dbId) return
      ideaSetting.export({
        idea_id: this.reportDetail.id,
        page_id: this.dbId 
      })
    },
    handleCancelDb() {
      this.dbId = ''
      this.visible = false
    }

  }
}
</script>

<style scoped lang='less'>
.reports-detail {
  position: absolute;
  min-height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  margin-top: 1px;
  background-color: #FFFFFF;
  z-index: 999;
  padding: 0 54px;
  padding-top: 24px;
  .ant-list-item-meta-description {
    color: #000000;
  }
  .reports-item {
    padding: 24px 0;
  }
  .select-box {
    display: flex;
    .select-item-name {
        width: 82px;
      line-height: 32px;
      font-size: 14px;
      color: #000000;
      font-family: Roboto-Bold;
    }
  }
  .title-box {
    font-family: Roboto-Bold;
    width: 100%;
    font-size: 16px;
    color: #000000;
    line-height: 32px;
    display: flex;
    justify-content: space-between;
    .name {
      color: #000;padding-right: 10px;font-weight: bold;font-family: Quicksand500;
    }
  }
  .reslease-time {
    color: #3E4345 !important;
    margin-right: 16px;
  }
 
  .reports-detail-card {
    position: relative;
    margin-top: 26px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    padding: 10px;
    padding-bottom: 20px;
    .userinfo {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
      .username {
        font-size: 20px;
        font-family: Quicksand500;
        font-weight: 500;
        color: #069697;
        line-height: 28px;
      }
    }
    .contents {
      padding-left: 55px;
      .contents-content {
        width: 90%;
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
      }
    }
  }
  .add-wrapper {
    text-align: left;
    font-size: 14px;
    font-family: Quicksand500;
    font-weight: 500;
    color: #3E4345;
    text-decoration:underline;
    line-height: 24px;
    cursor: pointer;
  }
  .comment-input {
    position: relative;
    padding-top: 10px;
    margin-right: 20px;
    .comment-btn {
      position: absolute;
      bottom: 10px;
      right: 10px;
      text-align: right;
    }
  }
  .comment-star {
    position: absolute;
    right: 20px;
    top: 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .star-num {
      font-size: 18px;
      font-family: Quicksand500;
      font-weight: 500;
      color: #5E6366;
      line-height: 28px;
      margin-left: 10px;
    }
  }
}
</style>
